.music{
    width: 50px;
    height: 34px;
    margin:0 auto;
    position: relative;
    i{
        width: 5px;
        height: 5px;
        position: absolute;
        bottom:0;
        background-color: #4C703A;
        font-size:0;
        border-radius: 2.5px;
        @for $i from 1 through 7 {
            &:nth-of-type(#{$i}) {
                left: (($i)-1) * 8px;
            }
        }
    }
    &.active {
        $times: (0.66),(0.8),(0.7),(0.5),(0.9),(1.2),(1.1);
        @each $t in $times {
            $i:index($times,$t);
            i:nth-of-type(#{$i}) {
                -webkit-animation:wave #{$t}s linear infinite;
                animation: wave #{$t}s linear infinite;
            }
        }
    }
}

@-webkit-keyframes wave{
    0%{height:8px}
    50%{height: 32px}
    100%{height: 12px}
}

@keyframes wave{
    0%{height:8px}
    50%{height: 32px}
    100%{height: 12px}
}